<template>
  <div class="info-table">
    <span>{{ title }}</span>
    <div class="table">
      <vxe-table
        :data="infoData"
        ref="infoTable"
        @checkbox-change="selectChangeEvent"
        border
        highlight-hover-row
        :checkbox-config="{ checkStrictly: true }"
      >
        <!-- 展开列 -->
        <vxe-table-column
          v-show="infoData.length > 0"
          type="seq"
          width="60"
        ></vxe-table-column>
        <vxe-table-column
          v-show="infoData.length > 0"
          type="checkbox"
          width="50"
        ></vxe-table-column>
        <template v-for="(item, index) in columnsData">
          <!-- 有回调的 -->
          <vxe-table-column
            v-if="item.type === 'isPublic'"
            :key="index"
            :field="item.prop"
            :title="item.label"
            :width="item.width"
          >
            <template slot-scope="scope">
              <span>{{ item.callback && item.callback(scope.row) }}</span>
            </template>
          </vxe-table-column>
          <vxe-table-column
            v-else-if="item.type === 'isLibrary'"
            :key="index"
            :field="item.prop"
            :title="item.label"
            :width="item.width"
          >
            <template slot-scope="scope">
              <span>{{ item.callback && item.callback(scope.row) }}</span>
            </template>
          </vxe-table-column>
          <vxe-table-column
            v-else-if="item.type === 'isComplete'"
            :key="index"
            :field="item.prop"
            :title="item.label"
            :width="item.width"
          >
            <template slot-scope="scope">
              <span>{{ item.callback && item.callback(scope.row) }}</span>
            </template>
          </vxe-table-column>
          <vxe-table-column
            v-else-if="item.type === 'sex'"
            :key="index"
            :field="item.prop"
            :title="item.label"
            :width="item.width"
          >
            <template slot-scope="scope">
              <span>{{ item.callback && item.callback(scope.row) }}</span>
            </template>
          </vxe-table-column>
          <vxe-table-column
            v-else-if="item.type === 'isSign'"
            :key="index"
            :field="item.prop"
            :title="item.label"
            :width="item.width"
          >
            <template slot-scope="scope">
              <span>{{ item.callback && item.callback(scope.row) }}</span>
            </template>
          </vxe-table-column>
          <vxe-table-column
            v-else-if="item.type === 'isHome'"
            :key="index"
            :field="item.prop"
            :title="item.label"
            :width="item.width"
          >
            <template slot-scope="scope">
              <span>{{ item.callback && item.callback(scope.row) }}</span>
            </template>
          </vxe-table-column>
          <!-- 纯文本的 -->
          <vxe-table-column
            v-else
            :key="index"
            :field="item.prop"
            :title="item.label"
            :width="item.width"
          >
          </vxe-table-column>
        </template>
        <vxe-table-column
          v-if="infoData.length > 0"
          title="操作"
          align="center"
          width="180"
          show-overflow
          fixed="right"
        >
          <template slot-scope="scope">
            <vxe-button
              status="primary"
              icon="vxe-icon--edit-outline"
              size="mini"
              @click="editBtn(scope)"
              >修改</vxe-button
            >
            <vxe-button
              status="danger"
              icon="vxe-icon--error"
              size="mini"
              @click="removeBtn(scope)"
              >删除</vxe-button
            >
          </template>
        </vxe-table-column>
      </vxe-table>
      <!-- 分页功能 -->
      <!-- <vxe-pager background :current-page.sync="page.currentPage" :page-size.sync="page.pageSize" :total="page.totalResult" :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']">
              </vxe-pager> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      labelConfig: {
        seq: true,
        checkbox: true
      }
    }
  },
  props: ["infoData", "columnsData", "title"],
  created() {
    // console.log(this.infoData)
  },
  methods: {
    // 点击修改
    editBtn(scope) {
      // console.log(scope)
      // const itemData = {
      //   dialogType: 'edit',
      //   scope: scope
      // }
      // this.$emit('editData', itemData)
    },
    // 根据id删除对应的数据
    removeBtn(Data) {
      // const index = Data.$rowIndex
      // this.$emit('removeData', index)
    },
    // 家庭基本信息复选框选中
    selectChangeEvent({ checked, records }) {}
  }
}
</script>
<style lang="scss" scoped>
.info-table {
  width: 20px;
  margin-right: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  .table {
    flex: 1;
    height: 100%;
  }
  .vxe-table {
    width: 100%;
  }
}
</style>
